<template>
    <div>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,index) in swiperimg" :key="index">
            <img :src="item" alt="">
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
      <div class="act-cont">
        <div class="act2-hed">
          <p>
            <span>{{title2}}</span>
            <span>{{apply}}</span>
          </p>
          <p>
            <span>浏览数</span>
            <span>{{views}}</span>
            <span>收藏数</span>
            <span>{{favorite}}</span>
          </p>
          <p>{{hold_start_time}}-{{hold_end_time}}</p>
        </div>
        <div class="act2-tit">
          <div class="isauth">
            <img :src="avatar" alt="">
            <img v-if="isauth==0?false:true" :src="'./static/lyl/approve.png'" alt="">
          </div>
          <div class="tit-center">
            <p>
              <span>{{active_organizer}}</span>
              <span @click="follow()">{{user_status?'已关注':'+关注'}}</span>
            </p>
            <p>{{signature}}</p>
          </div>
          <img :src="'./static/lyl/youjian.png'" alt="">
        </div>
        <!--活动公告-->
        <div class="Huo_box">
          <div class="con-d1">
            <span>活动公告</span>
            <span @click="activeR()">更多公告 <img :src="'./static/lyl/youjian.png'" alt=""></span>
          </div>
          <ul class="ulone">
            <li @click="deta(item)" v-for="(item,index) in datatx" :key="index">
              <div class="li-left">
                <p>{{item.post_title}}</p>
                <div class="li-footer">
                  <span>{{item.user_login}}</span>
                  <span>{{item.post_date}}</span>
                </div>
              </div>
              <img :src="item.smeta" alt="">
            </li>
          </ul>
        </div>
        <!--活动介绍-->
        <div class="act2-duce">
          <div class="introduce">活动介绍</div>
          <!--取消 后台添加-->
          <!--<div class="act2-center">-->
            <!--<img src="/static/lyl/tou.png" alt="">-->
            <!--&lt;!&ndash;<p>关于大集</p>&ndash;&gt;-->
            <!--<p>大集镇一凝聚产生力量 团结产生希望</p>-->
          <!--</div>-->
          <div class="pf" v-html="html"></div>
          <div class="introduce">联系我们</div>
          <div class="contact">
            <p>联系人：{{contact}}</p>
            <p>电&nbsp&nbsp&nbsp话：{{mobile}}</p>
            <p>地&nbsp&nbsp&nbsp址：{{active_address}}</p>
            <div class="duce-fot">
              <img :src="qr_code" alt="">
              <p>扫一扫加入官方微信群</p>
            </div>
          </div>
          <div class="act2-photo">
            <p class="Acti_p">
              <span>相册</span>
              <span @click="photoR()">查看更多 <img :src="'./static/lyl/youjian.png'" alt=""></span>
            </p>
            <ul class="photoul">
              <li @click="scaleph(index)" v-for="(item,index) in photoData" :key="index">
                <img :src="item" alt="">
              </li>
            </ul>
          </div>
          <!--精彩视频-->
          <div class="act2-photo">
            <p class="Acti_p">
              <span>精彩视频</span>
              <span @click="videoR()">查看更多 <img :src="'./static/lyl/youjian.png'" alt=""></span>
            </p>
            <ul class="ulfour">
              <li v-for="(item,index) in videoData" :key="index">
                <div class="img">
                  <img :src="item.thumb" alt="数据加载失败">
                  <img @click="playVideo(item)" :src="'./static/lyl/video.png'" alt="">
                </div>
                <p>{{item.video_title}}</p>
              </li>
            </ul>
          </div>
          <!--精彩瞬间-->
          <div class="act2-photo">
            <p class="Acti_p">
              <span>精彩瞬间</span>
              <span @click="videS()">查看更多 <img :src="'./static/lyl/youjian.png'" alt=""></span>
            </p>
            <ul class="ulfour">
              <li v-for="(item,index) in videoData2" :key="index">
                <div class="img">
                  <img :src="item.thumb" alt="数据加载失败">
                  <img @click="playVideo(item)" :src="'./static/lyl/video.png'" alt="">
                </div>
                <p>{{item.video_title}}</p>
              </li>
            </ul>
          </div>
          <!--往期精彩-->
          <div class="act2-photo">
            <p class="Acti_p">
              <span>往期精彩</span>
              <span @click="videP()">查看更多 <img :src="'./static/lyl/youjian.png'" alt=""></span>
            </p>
            <ul class="ulfour">
              <li v-for="(item,index) in videoData3" :key="index">
                <div class="img">
                  <img :src="item.thumb" alt="数据加载失败">
                  <img @click="playVideo(item)" :src="'./static/lyl/video.png'" alt="">
                </div>
                <p>{{item.video_title}}</p>
              </li>
            </ul>
          </div>
          <!--<div class="act2-active">-->
            <!--<p>-->
              <!--<span>活动动态</span>-->
              <!--<span @click="activeR()">查看更多 <img :src="'./static/lyl/youjian.png'" alt=""></span>-->
            <!--</p>-->
            <!--<ul>-->
              <!--<li v-for="(item,index) in activeData" :key="index">-->
                <!--<img :src="item.avatar" alt="">-->
                <!--<div class="act2-right">-->
                  <!--<p>{{item.user_login}}</p>-->
                  <!--<p>{{item.content}}</p>-->
                  <!--<p>-->
                    <!--<span>{{item.create_time | simplyToRelativeTime}}</span>-->
                    <!--<img @click="like3(item)" :src="item.status==1?'./static/lyl/like.png':'./static/lyl/like2.png'" alt="">-->
                  <!--</p>-->
                <!--</div>-->
              <!--</li>-->
            <!--</ul>-->
          <!--</div>-->
          <!--<div class="act2-vote">-->
            <!--<p>-->
              <!--<span>活动投票</span>-->
              <!--<span @click="voteR()">查看更多 <img :src="'./static/lyl/youjian.png'" alt=""></span>-->
            <!--</p>-->
            <!--<div class="act2-autor">参赛者</div>-->
            <!--<ul class="voteul">-->
              <!--<li v-for="(item,index) in pantData" :key="index">-->
                <!--<img :src="item.avatar" alt="">-->
                <!--<p>{{item.vote}}</p>-->
              <!--</li>-->
            <!--</ul>-->
            <!--<div class="act2-autor">节目</div>-->
            <!--<ul class="autor-ul">-->
              <!--<li v-for="(item,index) in pantData2" :key="index">-->
                <!--<img :src="item.img" alt="">-->
                <!--<p>{{item.name}}{{item.vote}}</p>-->
              <!--</li>-->
            <!--</ul>-->
          <!--</div>-->

          <div class="Activ_ping">
            <p class="Acti_p2">
              <span>活动评论</span>
              <span @click="videoR2()">查看更多 <img :src="'./static/lyl/youjian.png'" alt=""></span>
            </p>
            <ul class="y_ul">
              <li v-for="(item,index) in yongData" :key="index">
                <div class="y_left">
                  <img :src="item.avatar" alt="">
                </div>
                <div class="y_right">
                  <p>{{item.user_login}}</p>
                  <p>{{item.content}}</p>
                  <p class="ping_p" v-for="(item2,index2) in item.to_comments" :key="index2">
                    <span>{{item2.user_login}} :</span>
                    <span>{{item2.content}}</span>
                  </p>
                  <div class="y_foot">
                    <span>{{item.createtime}}</span>
                    <div class="y_rig">
                      <img @click="pingL2(item)" src="../../../assets/img/ping.png" alt="">
                      <img @click="like3(item)" :src="item.status==1?'./static/lyl/like.png':'./static/lyl/like2.png'" alt="">
                      <span>{{item.like_num}}</span>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>

        </div>
      </div>

      <!--评论输入框-->
      <div v-if="piShow" class="input">
        <input autofocus="autofocus" type="text" v-model="p_cont" placeholder="评论">
        <span @click="sendL()">发送</span>
      </div>

      <div class="acti-footer">
        <span @click="activeFollow()">{{active_status==1?'已关注':'关注'}}</span>
        <span @click="isbare2()">分享</span>
        <span @click="voteR()">投票</span>
        <span @click="applyR()">报名</span>
      </div>

      <!--soshom插件-->
      <a href="weixin://">点击打开微信</a>
      <button @click="myclick()">点击分享</button>
      <div id="soshid"></div>

      <!--share插件-->
      <share :config="config"></share>
      <van-popup v-model="bolls" position="bottom">
        <div @click="fenx()" class="fotsss" v-for="(item,index) in imgData" :key="index">
          <img :src="item" alt="">
          <p>分享到微信</p>
        </div>
      </van-popup>

      <transition name="van-slide-right">
        <div v-show="visible" class="tran_right">{{Fade}}</div>
      </transition>
    </div>
</template>

<script>
  import Swiper from 'swiper'
  import * as home from "../../../api/home.js";
  import * as list from "../../../api/list.js";
  import * as search from "../../../api/search.js"
  // import wx from 'weixin-js-sdk'
  // import axios from 'axios'
  import soshm from 'soshm'

    export default {
      name: "Active2",
      data(){
        return{
          p_cont:'',
          piShow:false,
          yongData:[],
          Fade:'',
          visible:false,
          config:
            {
              url: '', // 网址，默认使用 window.location.href
              source: '', // 来源（QQ空间会用到）, 默认读取head标签：<meta name="site" content="http://overtrue" />
              title: '大集舞会', // 标题，默认读取 document.title 或者 <meta name="title" content="share.js" />
              description: '活动详情', // 描述, 默认读取head标签：<meta name="description" content="PHP弱类型的实现原理分析" />
              image: '', // 图片, 默认取网页中第一个img标签
              sites: ['wechat','qzone', 'qq', 'weibo', 'douban'], // 启用的站点
              disabled : ['google', 'facebook', 'twitter'], // 禁用的站点
              wechatQrcodeTitle: '微信扫一扫：分享', // 微信二维码提示文字
              wechatQrcodeHelper: '<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>'
            },
          bolls:false,
          imgData:['./static/lyl/timg.jpg','./static/lyl/timg.jpg','./static/lyl/timg.jpg','./static/lyl/timg.jpg'],
          swiperimg:[],
          favorite:'',
          views:'',
          title2:'',
          hold_start_time:'',
          hold_end_time:'',
          active_organizer:'',
          active_address:'',
          html:null,
          mobile:'',
          avatar:'',
          signature:'',
          apply:'',
          qr_code:'',
          contact:'',
          photoData:[],
          videoData:[],
          videoData2:[],
          videoData3:[],
          activeData:[],
          pantData:[],
          pantData2:[],
          tuijiaData:[],
          isauth:'',
          user_status:'',
          uid:'',
          datatx:[],
          to_uid:'',
          parentid:'',
          active_status:''
        }
      },
      beforeMount(){
        //活动公告
        let parmes = {type:1};
        home.postsList(parmes).then(res=>{
          this.datatx = res.data;
        });


        let isauth = {user_id:this.$store.state.user_id};
        list.isAuth(isauth).then(res=>{
          this.isauth = res.data.is_auth;
        });

        let parmes2 = {id:this.$route.params.id2,user_id:this.$store.state.user_id};
        list.activeDetail(parmes2).then(res=>{
          console.log('活动详情',res);
          this.favorite = res.data.favorite;
          this.views = res.data.views;
          this.title2 = res.data.title;
          this.uid = res.data.uid;
          this.user_status = res.data.user_status;
          this.active_status = res.data.active_status;
          this.hold_start_time = res.data.hold_start_time;
          this.hold_end_time = res.data.hold_end_time;
          this.active_organizer = res.data.active_organizer;
          this.active_address = res.data.active_address;
          this.html = res.data.content;
          this.mobile = res.data.mobile;
          this.avatar = res.data.avatar;
          this.signature = res.data.signature;
          this.apply = res.data.apply;
          this.qr_code = res.data.qr_code;
          this.contact = res.data.contact;
          this.swiperimg = res.data.main_pic;
          this.$nextTick(() => {  // 下一个UI帧再初始化swiper
            var swiper = new Swiper('.swiper-container', {
              autoplay:true,
              loop : true,
              pagination: {
                el: '.swiper-pagination',
              },
            });
          })
        });

        let parmes3 = {id:this.$route.params.id2,type:1};
        list.activePhoto(parmes3).then(res=>{
          console.log(res);
          this.photoData = res.data
        });

        //精彩视频
        let parm = {num:10,active_id:this.$route.params.id2,is_recommended:1};
        list.activeVideo(parm).then(res=>{
          console.log('精彩视频',res);
          this.videoData = res.data
        });
        //精彩瞬间
        let parmm = {num:10,active_id:this.$route.params.id2,type:1};
        list.activeVideo(parmm).then(res=>{
          console.log('精彩瞬间',res);
          this.videoData2 = res.data
        });
        //往期精彩
        let parmmm = {num:10,active_id:this.$route.params.id2,type:2};
        list.activeVideo(parmmm).then(res=>{
          console.log('往期精彩',res);
          this.videoData3 = res.data
        });
        //评论列表
        let parms = {num:2,type:2,post_id:this.$route.params.id2,user_id:this.$store.state.user_id};
        search.commentList(parms).then(res=>{
          console.log('评论列表',res)
          this.yongData = res.comments
        })


        // //活动动态
        // let parmes7 = {
        //   id:this.$route.params.id2,
        //   type:1,
        //   user_id:this.$store.state.user_id
        // };
        // list.activeDynamic(parmes7).then(res=>{
        //   console.log(res.data);
        //   this.activeData = res.data;
        // });

        // //人气排行
        // let parmes4 = {active_id:this.$route.params.id2,type:2,num:4};
        // list.voteRank(parmes4).then(res=>{
        //   //console.log('人气',res.data);
        //   this.pantData = res.data;
        // });
        // //节目排行
        // let parmes5 = {active_id:this.$route.params.id2,type:1,num:4};
        // list.voteRank(parmes5).then(res=>{
        //   //console.log('节目',res.data);
        //   this.pantData2 = res.data;
        // });


        // //推荐视频
        // let parmes6 = {active_id:this.$route.params.id2,num:4};
        // list.recommendedVideo(parmes6).then(res=>{
        //   //console.log(res);
        //   this.tuijiaData = res.data;
        // })
      },
      mounted(){
        //alert(location.href.split('#')[0]);
        // let url = encodeURIComponent(this.isIosOrAndroid() === 'android' ? location.href.split('#')[0] : window.initUrl);
        //let url = {url:location.href.split('#')[0]};
        //alert(url);
        // console.log(wx);
        // axios.get('http://dajiwuhui.kaifazhe.site/Api/Share/getSignPackage',{params:{url:location.href.split('#')[0]}}).then(res=>{
        //   var getMsg = res.data.data;
        //   // console.log("url",url)
        //   console.log("返回值",res);
        //   wx.config({
        //     debug: false, //生产环境需要关闭debug模式
        //     appId: getMsg.appId, //appId通过微信服务号后台查看
        //     timestamp: getMsg.timestamp, //生成签名的时间戳
        //     nonceStr: getMsg.nonceStr, //生成签名的随机字符串
        //     signature: getMsg.signature, //签名
        //     jsApiList: [ //需要调用的JS接口列表
        //       'onMenuShareTimeline', //分享给好友
        //       'onMenuShareAppMessage', //分享到朋友圈
        //       'showMenuItems',
        //       'hideMenuItems'
        //     ]
        //   });
        // });

        // console.log(wx);
        // axios.get('http://dajiwuhui.kaifazhe.site/Api/Share/getSignPackage',{params:{url:location.href.split('#')[0]}}).then(res=>{
        //   var getMsg = res.data.data;
        //   // console.log("url",url)
        //   console.log("返回值",res);
        //   wx.config({
        //     debug: false, //生产环境需要关闭debug模式
        //     appId: getMsg.appId, //appId通过微信服务号后台查看
        //     timestamp: getMsg.timestamp, //生成签名的时间戳
        //     nonceStr: getMsg.nonceStr, //生成签名的随机字符串
        //     signature: getMsg.signature, //签名
        //     jsApiList: [ //需要调用的JS接口列表
        //       'updateAppMessageShareData', //分享给好友
        //       'updateTimelineShareData', //分享到朋友圈
        //     ]
        //   });
        // });

        mui.back = function() {
          window.history.go(-1);
        }
      },
      filters:{
        simplyToRelativeTime(timestamp) {
          let currentUnixTime = Math.round((new Date()).getTime() / 1000);       // 当前时间的秒数
          let deltaSecond = currentUnixTime - parseInt(timestamp, 10);            // 当前时间与要转换的时间差（ s ）
          let result;

          if (deltaSecond < 60) {
            result = deltaSecond + '秒前';
          } else if (deltaSecond < 3600) {
            result = Math.floor(deltaSecond / 60) + '分钟前';
          } else if (deltaSecond < 86400) {
            result = Math.floor(deltaSecond / 3600) + '小时前';
          } else {
            result = Math.floor(deltaSecond / 86400) + '天前';
          }
          return result;
        }
      },
      methods:{
        photoR(){
          this.$router.push('/photo/1/'+this.$route.params.id2);
        },
        follow(){
          if (this.user_status==0){
            this.user_status = 1;
            let flow = {follow_id:this.uid,user_id:this.$store.state.user_id,status:1};
            search.follow(flow).then(res=>{
              console.log(res);
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            });
            search.followed(flow).then(res=>{
              console.log(res);
            })
          } else{
            this.user_status = 0;
            let flow = {follow_id:this.uid,user_id:this.$store.state.user_id,status:0};
            search.follow(flow).then(res=>{
              console.log(res);
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            });
            search.followed(flow).then(res=>{
              console.log(res);
            })
          }
        },
        // more(){
        //   this.$router.push({ path: "/morenews" });
        // },
        deta(item){
          this.$router.push({path:'/detail/'+item.id});
        },
        scaleph(i){
          // this.$router.push('/photo2/'+(i+1)+'/'+this.photoData.length);
          // this.$store.commit('chuan',it2);
          this.$router.push('/photo2/'+this.photoData.length+'/'+(i+1));
          this.$store.commit('chuan',this.photoData);
        },
        videoR(){
          this.$router.push({
            path:'/greatvideo',
            query:{
              id:this.$route.params.id2
            }
          });
        },
        videS(){
          this.$router.push({
            path:'/splendidmoment',
            query:{
              id:this.$route.params.id2
            }
          });
        },
        videP(){
          this.$router.push({
            path:'/pastwonderful',
            query:{
              id:this.$route.params.id2
            }
          });
        },
        videoR2(){
          this.$router.push('/recommend/5/'+this.$route.params.id2);
        },
        playVideo(item){
          this.$router.push('/video2/'+item.id+'/'+this.$route.params.id2)
        },
        activeR(){
          this.$router.push('/dynamic/3/'+this.$route.params.id2);
        },
        voteR(){
          this.$router.push('/vote/4/showout/0/'+this.$route.params.id2);
        },
        applyR(){
          if (this.$store.state.user_id.length==0){
            this.$router.push('/register')
          } else{
            this.$router.push('/apply/'+this.$route.params.id2);
          }
        },
        like3(itl){
          if (itl.status==1){
            itl.status=0;
            let parms = {
              id:itl.id,
              user_id:this.$store.state.user_id,
              status:itl.status
            };
            search.commentLike(parms).then(res=>{
              console.log(res);
              itl.like_num -=1;
              this.like_num -=1;
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            })
          } else{
            itl.status=1;
            let parms = {
              id:itl.id,
              user_id:this.$store.state.user_id,
              status:itl.status
            };
            search.commentLike(parms).then(res=>{
              console.log(res);
              itl.like_num = Number(itl.like_num) + 1;
              this.like_num = Number(this.like_num) + 1;
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            })
          }
        },
        pingL2(item){
          this.piShow = true;
          this.to_uid = item.uid;
          this.parentid = item.id
        },
        sendL(){
          let params = {type:2,post_id:this.$route.params.id2,uid:this.$store.state.user_id,content:this.p_cont,to_uid:this.to_uid,parentid:this.parentid};
          search.comment(params).then(res=>{
            console.log('二级评论',res);
            this.piShow = false;
            //评论列表
            let parms = {type:2,post_id:this.$route.params.id2,user_id:this.$store.state.user_id};
            search.commentList(parms).then(res=>{
              console.log('评论列表',res)
              this.yongData = res.comments
            })
          })
        },
        activeFollow(){
          if (this.active_status==1) {
            this.active_status = 0;
            let parms = {active_id:this.$route.params.id2,status:0,user_id:this.$store.state.user_id}
            search.activeFollow(parms).then(res=>{
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            })
          }else{
            this.active_status = 1;
            let parms = {active_id:this.$route.params.id2,status:1,user_id:this.$store.state.user_id}
            search.activeFollow(parms).then(res=>{
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            })
          }

        },
        isbare2(){
          this.bolls = !this.bolls;
        },
        myclick(){
          //var url = location.href.split('#')[0];
          //alert(location.href.split('#')[0]);
          // let url = encodeURIComponent(this.isIosOrAndroid() === 'android' ? location.href.split('#')[0] : window.initUrl);
          //let url = {url:location.href.split('#')[0]};
          //alert(url);


          // let fenurl = location.href.split('#')[0];
          // wx.ready(function () {
          //   wx.updateAppMessageShareData({ // 分享给朋友  ,在config里面填写需要使用的JS接口列表，然后这个方法才可以用
          //     title: '我是大集舞会', // 分享标题
          //     desc: 'This is a test!', // 分享描述
          //     link: fenurl, // 分享链接
          //     imgUrl: 'http://dajiwuhui.kaifazhe.site/public/20190114202521.png', // 分享图标
          //     type: '', // 分享类型,music、video或link，不填默认为link
          //     dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
          //     success: function() {
          //        console.log('分享成功')
          //     },
          //     cancel: function() {
          //       console.log('分享失败')
          //     }
          //   });
          //});

          // wx.error(function(res){
          //   console.log(res);
          //   // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
          // });

          soshm('#soshid', {
            // 分享的链接，默认使用location.href
            url:'',
            // 分享的标题，默认使用document.title
            title: '大集舞会',
            // 分享的摘要，默认使用<meta name="description" content="">content的值
            digest: '活动详情',
            // 分享的图片，默认获取本页面第一个img元素的src
            pic: '',
            // 选择要显示的分享站点，顺序同sites数组顺序，
            // 支持设置的站点有weixin,yixin,weibo,qzone,tqq,douban,renren,tieba
            sites: ['weixin', 'weibo', 'yixin', 'qzone']
          })
        }
      }
    }
</script>

<style scoped>

 .act-cont .act2-hed{
   padding: 30px 40px;
   /*border-bottom: 2px solid #dcdcdc;*/
 }
  .act-cont .act2-hed p:nth-child(1){
    display: flex;
    justify-content: space-between;
  }
 .act-cont .act2-hed p:nth-child(1) span:nth-child(1){
   font-size: 32px;
   font-weight: bold;
 }
 .act-cont .act2-hed p:nth-child(1) span:nth-child(2){
   width: 100px;
   height: 40px;
   border-radius: 5px;
   font-size: 24px;
   color: #fff;
   background: #e98345;
   text-align: center;
   line-height: 40px;
 }
 .act-cont .act2-hed p:nth-child(2){
   font-size: 26px;
   color: #8c8c8c;
   margin: 30px 0;
 }
 .act-cont .act2-hed p:nth-child(2) span{
   margin-right: 40px;
 }
 .act-cont .act2-hed p:nth-child(3){
   font-size: 24px;
   color: #8c8c8c;
   padding-left: 60px;
 }
 .act-cont .act2-tit{
   /*border: 1px solid #cdcdcd;*/
   /*margin: 60px 40px 0;*/
   padding: 28px 20px;
   display: flex;
   justify-content: space-between;
 }
 .act-cont .act2-tit .isauth{
   width: 130px;
   height: 130px;
   background: #dcdcdc;
   position: relative;
   margin-right: 20px;
   border-radius: 50%;
 }
 .act-cont .act2-tit .isauth img:nth-child(1){
   width: 130px;
   height: 130px;
   border-radius: 50%;
 }
 .act-cont .act2-tit .isauth img:nth-child(2){
   width: 30px;
   height: 30px;
   position: absolute;
   right: 0;
   top: 0;
 }
 .act-cont .act2-tit .tit-center{
   flex-grow: 1;
   margin-right: 20px;
 }
 .act-cont .act2-tit .tit-center p{
   padding: 5px 0;
   font-size: 24px;
   line-height: 36px;
   color: #8c8c8c;
 }
 .act-cont .act2-tit .tit-center p:nth-child(1){
   display: flex;
   justify-content: space-between;
 }
 .act-cont .act2-tit .tit-center p:nth-child(1) span{
   width: 70%;
   font-size: 32px;
   line-height: 36px;
   font-weight: bold;
   overflow: hidden;
   text-overflow:ellipsis;
   white-space: nowrap;
 }
 .act-cont .act2-tit .tit-center p:nth-child(1) span:nth-child(2){
   width: 100px;
   height: 46px;
   border: 1px solid #723676;
   font-size: 24px;
   line-height: 46px;
   border-radius: 8px;
   color: #723676;
   text-align: center;
   /*margin-left: 24px;*/
 }
 .Huo_box{
   border-top: 2px solid #dcdcdc;
   border-bottom: 2px solid #dcdcdc;
 }

 .act-cont .act2-tit img:nth-child(3){
   width: 16px;
   align-self: center;
 }
  .act-cont .act2-duce .introduce{
    margin: 80px 40px 60px;
    height: 70px;
    line-height: 70px;
    color: #fff;
    text-align: center;
    font-size: 32px;
    background: url("../../../assets/img/rhombus.png") no-repeat center/cover;
  }

 .act2-center{
   text-align: center;
   padding-bottom:38px;
 }
 .act2-center img{
   width: 170px;
 }
 .act2-center p:nth-child(2){
   font-size: 32px;
   line-height: 44px;
   margin: 30px 0;
 }
 .act2-center p:nth-child(3){
   font-size: 28px;
   line-height: 44px;
   color: #884ca4;
 }
 .act2-duce .pf{
   text-indent: 32px;
   font-size: 24px;
   line-height: 44px;
   margin-bottom: 50px;
   padding: 0 40px;
 }
  .contact p{
    font-size: 32px;
    padding: 0 40px 30px;
  }
 .contact .duce-fot{
   text-align: center;
   border-bottom: 2px solid #dcdcdc;
   margin-bottom: 40px;
   padding-bottom: 20px;
 }
 .contact .duce-fot img{
   width: 240px;
 }
 .contact .duce-fot p{
   font-size: 24px;
 }
 .act2-photo{
   padding: 0 40px;
   border-bottom: 2px solid #dcdcdc;
   margin-bottom: 40px;
 }
 .act2-photo .Acti_p{
   display: flex;
   justify-content: space-between;
   margin-bottom: 30px;
 }
  .act2-photo .Acti_p span:nth-child(1){
    font-size: 32px;
    font-weight: bolder;
  }
 .act2-photo .Acti_p span:nth-child(2){
   font-size: 26px;
 }
 .act2-photo .Acti_p span:nth-child(2) img{
   width: 12px;
   margin-left: 20px;
 }
 .act2-photo ul{
   display: flex;
   justify-content: space-between;
 }
 .act2-photo ul li img{
   width: 200px;
   height: 200px;
   margin-bottom: 20px;
   border-radius: 10px;
 }
 .act2-photo .photoul{
   justify-content: flex-start;
   overflow-x: auto;
   white-space: nowrap;
   width: auto;
 }
 .act2-photo .photoul li{
   margin-right: 30px;
 }
 .act2-photo .ulfour{
   overflow-x: auto;
   white-space: nowrap;
   width: auto;
   padding-bottom: 20px;
 }
 .act2-photo .ulfour li{
   margin-right: 30px;
 }
 .act2-photo .ulfour li .img{
   width: 320px;
   height: 200px;
   background: #dcdcdc;
   position: relative;
 }
  .act2-photo .ulfour li .img img:nth-child(1){
    width: 320px;
    height: 200px;
  }
 .act2-photo .ulfour li .img img:nth-child(2){
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
   width: 54px;
   height: 54px;
 }
 .act2-photo .ulfour li p{
   overflow: hidden;
   text-overflow:ellipsis;
   white-space: nowrap;
   width: 320px;
   font-size: 28px;
   text-align: center;

 }
 .act2-active{
   padding: 0 40px;
   border-bottom: 2px solid #dcdcdc;
   margin-bottom: 40px;
 }
  .act2-active>p{
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
  }
  .act2-active>p span:nth-child(1){
    font-size: 32px;
    font-weight: bolder;
  }
  .act2-active>p span:nth-child(2){
    font-size: 26px;
  }
  .act2-active>p span:nth-child(2) img{
    width: 12px;
    margin-left: 20px;
  }
  .act2-active ul li{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #dcdcdc;
    margin-bottom: 20px;
  }
 .act2-active ul li:last-child{
   border-bottom: none;
 }
  .act2-active ul li>img{
    width: 90px;
    height: 90px;
    border-radius: 100%;
    background: #bfbfbf;
  }
 .act2-active ul li .act2-right{
   width: 550px;
   margin-left: 20px;
 }
 .act2-active ul li .act2-right p:nth-child(1){
   font-size: 32px;
   margin-bottom: 10px;
 }
 .act2-active ul li .act2-right p:nth-child(2){
   font-size: 24px;
   line-height: 36px;
 }
 .act2-active ul li .act2-right p:nth-child(3){
   display: flex;
   justify-content: space-between;
   padding: 40px 0;
 }
 .act2-active ul li .act2-right p:nth-child(3) span{
   font-size: 24px;
   line-height: 36px;
   color: #8c8c8c;
 }
 .act2-active ul li .act2-right p:nth-child(3) img{
   width: 26px;
   height: 30px;
 }
.act2-vote{
  padding: 0 40px;
  border-bottom: 2px solid #dcdcdc;
  margin-bottom: 40px;
}
 .act2-vote>p{
   display: flex;
   justify-content: space-between;
   margin-bottom: 30px;
 }
 .act2-vote>p span:nth-child(1){
   font-size: 32px;
   font-weight: bolder;
 }
 .act2-vote>p span:nth-child(2){
   font-size: 26px;
 }
 .act2-vote>p span:nth-child(2) img{
   width: 12px;
   margin-left: 20px;
 }
  .act2-vote .act2-autor{
    font-size: 26px;
    padding-bottom: 40px;
  }
 .act2-vote ul{
   display: flex;
   justify-content: space-between;
   margin-bottom: 30px;
 }
 .act2-vote ul li{
   text-align: center;
 }
 .act2-vote ul li img{
   width: 90px;
   height: 90px;
   border-radius: 100%;
   margin-bottom: 20px;
 }
 .act2-vote ul li p:nth-child(2){
   font-size: 24px;
   color: #8c8c8c;
 }
 .act2-vote .autor-ul{
   flex-wrap: wrap;
 }
 .act2-vote .autor-ul li{
   margin: 20px 20px 0 0;
   width: 150px;
 }
 .act2-vote .autor-ul li:nth-child(4n+4){
   margin-right: 0;
 }
  .act2-vote .autor-ul li img{
    width: 150px;
    height: 112px;
    border-radius: 0;
  }
.tuijian{
  margin-bottom: 0;
  border-bottom: none;
}
  .acti-footer{
    position: fixed;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    display: flex;
  }
 .acti-footer span{
   height: 100px;
   font-size: 36px;
   line-height: 100px;
   text-align: center;
   color: #fff;
   flex-grow: 1;
 }
 .acti-footer span:nth-child(1){
   background: #e3bd52;
 }
 .acti-footer span:nth-child(2){
   background: #e98345;
 }
 .acti-footer span:nth-child(3){
   background: #884ca4;
 }
 .acti-footer span:nth-child(4){
   background: #884c23;
 }
 .act2-vote .voteul{
   justify-content: flex-start;
   flex-wrap: wrap;
  }
 .act2-vote .voteul li{
   margin-right: 20px;
 }

 .van-popup{
   width: 100%;
   height: 200px;
   padding: 50px 0;
   display: flex;
   justify-content: space-around;
 }
 .van-popup img{
   width: 100px;
   height: 100px;
 }
 .fotsss{
   text-align: center;
 }
 .fotsss p{
   font-size: 26px;
   padding-top: 10px;
 }

 .Activ_ping{
   border-bottom: 2px solid #dcdcdc;
   margin-bottom: 40px;
 }
 .Activ_ping .Acti_p2{
   display: flex;
   justify-content: space-between;
   padding: 0 40px;
 }
 .Activ_ping .Acti_p2 span:nth-child(1){
   font-size: 32px;
   font-weight: bolder;
 }
 .Activ_ping .Acti_p2 span:nth-child(2){
   font-size: 26px;
 }
 .Activ_ping .Acti_p2 span:nth-child(2) img{
   width: 12px;
   margin-left: 20px;
 }


 .y_ul li{
   border-bottom: 2px solid #b3b2b2;
   padding: 30px 40px;
   display: flex;
 }
 .y_ul li .y_left img{
   width: 60px;
   height: 60px;
   border-radius: 50%;
   margin-right: 30px;
 }
 .y_ul li .y_right{
   flex-grow: 1;
 }
 .y_ul li .y_right p:nth-child(1){
   font-size: 24px;
   color: #717070;
   padding-bottom: 20px;
 }
 .y_ul li .y_right p:nth-child(2){
   font-size: 18px;
   line-height: 30px;
   color: #717070;
   padding-bottom: 20px;
 }
 .y_ul li .y_right .ping_p{
   padding: 20px;
   background: #dcdcdc;
 }
 .y_ul li .y_right .ping_p span{
   font-size: 18px;
 }
 .y_ul li .y_right .ping_p span:nth-child(1){
   color: #884ca4;
 }
 .y_ul li .y_right .y_foot{
   padding-top: 20px;
   display: flex;
   justify-content: space-between;
 }
 .y_ul li .y_right .y_foot span{
   font-size: 18px;
   color: #9c9a9a;
 }
 .y_ul li .y_right .y_foot .y_rig img{
   width: 35px;
   height: 35px;
 }
 .y_ul li .y_right .y_foot .y_rig img:nth-child(1){
   margin-right: 40px;
 }

 .input{
   background: #efefef;
   display: flex;
   justify-content: space-between;
   padding: 20px 40px;
 }
 .input input{
   flex-grow: 1;
   border-radius: 10px;
   padding: 15px;
   font-size: 30px;
   caret-color:#48c261;
 }
 .input span{
   align-self: center;
   margin-left: 40px;
   border-radius: 10px;
   width: 90px;
   height: 60px;
   background: #48c261;
   color: #fff;
   line-height: 60px;
   text-align: center;
   font-size: 30px;
 }
 .tran_right{
   width: 220px;
   height: 60px;
   border-radius: 10px;
   text-align: center;
   line-height: 60px;
   font-size: 30px;
   top: 50%;
   left: 50%;
   position: fixed;
   background: rgba(0,0,0,0.6);
   color: #fff;
 }
</style>
